<div class="modal fade" role="dialog" aria-modal="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <form class="modal-content" #form (ngSubmit)="submit()">
      <div class="modal-body">
        <div class="box">
          <div class="box-header">{{ "passwordConfirmation" | i18n }}</div>
          <div class="box-content">
            <div class="box-content-row box-content-row-flex" appBoxRow>
              <div class="row-main">
                <label for="masterPassword">{{ "masterPass" | i18n }}</label>
                <input
                  id="masterPassword"
                  type="{{ showPassword ? 'text' : 'password' }}"
                  name="MasterPassword"
                  class="monospaced"
                  [(ngModel)]="masterPassword"
                  required
                  appAutofocus
                />
              </div>
              <div class="action-buttons">
                <button
                  type="button"
                  class="row-btn"
                  appStopClick
                  appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                  [attr.aria-pressed]="showPassword"
                  (click)="togglePassword()"
                >
                  <i
                    class="bwi bwi-lg"
                    aria-hidden="true"
                    [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                  ></i>
                </button>
              </div>
            </div>
          </div>
          <div class="box-footer">
            {{ "passwordConfirmationDesc" | i18n }}
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary btn-submit">
          <span>{{ "ok" | i18n }}</span>
        </button>
        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
          {{ "cancel" | i18n }}
        </button>
      </div>
    </form>
  </div>
</div>
